<template>
	<view class="body">
		<u-navbar :title="title" :background="{ background: '#ffd5cc' }" :autoBack="true"></u-navbar>

		<view class="Search-u">
			<Search pageTitle="搜索" placeholder="快搜索你想要的商品吧~" color="#F05A39" @search="searchStore" @clear="clear"></Search>
		</view>

		<view class="pr-backround app-bottom">
			<view v-if="loading" class="add-load">
				<u-loading mode="flower"></u-loading>
			</view>

			<view v-else-if="productList.length != 0">
				<ProductList :productList="productList"></ProductList>
				<loadMore :currentLength="productList.length" :total="total" :pageSize="pageSize" @load-list="getFriendsPage()" ref="loadArray" @load-add="pageNum++"></loadMore>
			</view>

			<u-empty v-else icon-size="400" src="/static/main/image2x.png"></u-empty>

		</view>
	</view>
</template>

<script>
import Search from '@/components/you-search/index.vue';
import ProductList from '@/components/produc-list/index.vue';
import main from '@/api/main.js';
import loadMore from '@/components/load-more/load-more.vue';
export default {
	components: {
		Search,
		ProductList,
		loadMore
	},
	data() {
		return {
			productList: [],
			title: '',
			loading: false,
			pageNum: 1,
			pageSize: 10,
			total: 0,
			catId: 0,
			searchName: '',
			isSearch: false
		};
	},
	onLoad(o) {
		if (o.name) {
			this.title = o.name;
		}
		if (o.id) {
			this.catId = o.id;
			this.getArray();
		}
	},
	onShow() {},
	onReachBottom() {
		if (this.total > this.pageNum * this.pageSize) {
			this.pageNum++;
			this.$refs.loadArray.loadMore();
		}
	},
	methods: {
		clear() {
			this.searchName = '';
			this.getArray();
			this.isSearch = false;
		},
		searchStore(searchValue) {
			if (!searchValue) {
				return;
			}
			this.searchName = searchValue;
			this.getArray();
			this.isSearch = true;
		},
		getArray() {
			let _this = this;
			_this.loading = true;
			main.getGood({
				goodClassify: _this.catId,
				pageNum: _this.pageNum,
				pageSize: _this.pageSize,
				goodName: _this.searchName,
			})
				.then((res) => {
					_this.productList = res.rows;
					_this.loading = false;
					_this.total = res.total;
				})
				.catch((erro) => {
					console.log(erro);
				});
		},
		getFriendsPage() {
			let _this = this;
			main.getGood({
				goodClassId: _this.catId,
				pageNum: _this.pageNum,
				pageSize: _this.pageSize,
				goodName: _this.searchName,
			})
				.then((res) => {
					_this.hotGoods = [..._this.hotGoods, ...res.rows];
					_this.total = data.total;
				})
				.catch((erro) => {
					console.log(erro);
				});
			return _this.hotGoods.length;
		}
	}
};
</script>

<style lang="scss" scoped>
.body {
	background-color: #ffd5cc;
	width: 100%;
	min-height: 100vh;
}

.Search-u {
	margin: 0 0 20rpx 0;
}
.pr-backround {
	background-color: #f8f8f8;
	border-radius: 25rpx 25rpx 0 0;
	min-height: calc(100vh - 84px - 20rpx);
}
</style>
